<template>
    <div id="app">
        <!--   路由的出口-->
        <router-view />
        <div v-show="showTabbar" class="tabbar">
            <van-tabbar v-model="active" route>
                <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item to="/company" icon="search">公司</van-tabbar-item>
                <van-tabbar-item to="/message" icon="friends-o">消息</van-tabbar-item>
                <van-tabbar-item to="/mine" icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script setup>
import { watch } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'; // 导入useRoute

const route = useRoute(); 
const active = ref(0);
const showTabbar = ref(true);
watch(route, (to) => {
    showTabbar.value = !to.meta.hideTabbar; // 使用.value更新ref
});
onMounted(() => {
    showTabbar.value = !route.meta.hideTabbar; // 初始化时设置
});

</script>


<style lang="less">
#app {
    max-width: 750px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-width: 320px;
}
</style>